<template>
	<view class="order pb15  clearfix">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">我的订单</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav box-shadow-none   solid-top solid-bottom border-width-1">
			<view class="flex text-center">
				<view
					class="cu-item flex-sub"
					:class="index == TabCur ? 'text-prices cur' : ''"
					v-for="(item, index) in list"
					:key="index"
					@tap="tapTab(index)"
				>
					{{ item }}
				</view>
			</view>
		</scroll-view>
		<!-- order -->
		<view class="mt5 bg-white px15 flex flex-direction" v-for="(item,index) in List" :key="index" :class="{mt10:index!=0}">
			<view class="py15 mt5 flex align-center justify-between" >
				<view class="fle align-center">
					<text>订单号：</text>
					<text class="ml5">{{item.orderSn}}</text>
				</view>
				<text>{{ordername[item.status]}}</text>
			</view>
			<view class="flex flex-direction wp100" v-for="(goods,index) in item.order" :key="index" @click="pushPage('/pages/order/orderxq?id='+goods.id)">
				<view class="flex align-center  py10 bt1">
					<view class="block70 border-info radius-5 discenter"><image :src="goods.pic" class="block70"></image></view>
					<view class="flex flex-direction align-start justify-between ml15 h70 mworde">
						<view class="flex flex-direction pr10 wp100">
							<text class="ellipsis">{{goods.goodName}}</text>
							<!-- <text class="ellipsis wp100 mt5 f12 text-info">{{goods.guige}}</text> -->
						</view>
						<view class="flex align-center  justify-between wp100">
							<text class="text-prices" v-if="goods.isVal!=4">￥{{goods.price}}</text>
							<text class="text-prices" v-else>{{goods.price}}益豆</text>
							<text class="text-info">X{{goods.num}}</text>
						</view>
					</view>
				</view>
				<view class="mt8 pb20 mb10" v-if="item.status!=1">
					<view class=" flex align-center justify-end" v-if="item.status =='0'">
					    <view class="order-quxiao discenter mr15" >取消</view>
					    <view class="order-del discenter" >去付款</view>
					</view>
					<view class="px15 flex align-center justify-end" v-if="item.status =='2'">
						<!-- <view class="order-quxiao discenter mr15" >申诉</view> -->
						<!-- <view class="order-quxiao discenter mr15" >申请退款</view> -->
					    <view class="order-del discenter">确认收货</view>
					</view>
					<view class="px15 flex align-center justify-end " v-if="item.status =='3'">
					    <view class="order-del discenter" >删除</view>
					</view>   
				</view>
			</view>
			<view class="flex align-center justify-end py10 bt1" :class="{mb10:item.status==2}">
				<text class="text-black mr10">共{{item.num}}件</text>
				<text class="text-prices" v-if="item.isVal!='4'">￥{{item.sumMoney}}</text>
				<text class="text-prices" v-else>{{item.sumMoney}}益豆</text>
			</view>
		</view>
		<view @touchmove.stop.prevent class="cu-modal" :class="modalName == 'onlineModal' ? 'show' : ''">
			<view class="cu-dialog bg-white" @tap.stop>
				<view class="py20 discenter f16 fwb">取消订单</view>
				<view class="mb40">您确定要取消该订单吗？</view>
				<view class="action h50 mx0 flex-sub f12  bt1  flex align-center justify-between px30 ">
					<view class="w-50 discenter br1">
						<text @click="HideModal" class="px20 py10 radius-5 f15 color-black">取消</text>
					</view>
					<view class="w-50 discenter">
						<text @click="quxiaosure" class="px20 py10 radius-5 f15 color-black">确定</text>
					</view>
				</view>
			</view>
		</view>
		</form>
	</view>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
	components: {},
	data() {
		return {
			list: ['全部','待付款', '待发货', '待收货', '已完成'],
			ordernum: '',
			ordername:['待付款', '待发货', '待收货', '已完成'],
			TabCur: 0,
			finish: false,
			List: [],
			paylist:[
				
				{
					provider: 'alipay',
					name: '支付宝',
					icon: '/static/payment/alipay@2x.png'
				},
				{
					provider: 'wxpay',
					name: '微信',
					icon: '/static/payment/wechat@2x.png'
				},
			],
		}
	},
	computed: {
		...mapState(['update',  'isLoading', 'ordertabs'])
	},
	onHide() {
		this.HideModal()
	},
	onBackPress() {
		this.HideModal()
	},
	onLoad(e) {
		this.TabCur = this.ordertabs
		this.getData()
	},
	onShow() {
		if(this.update){
			this.clearData()
			this.getData()
			this.setUpdate(false)
		}
	},
	onReachBottom() {
		this.getData()
	},
	methods: {
		...mapActions(['setUpdate', 'setOrder']),
		async getData() {
			let orderstatus=''
			if(this.TabCur==0){
				orderstatus=4
			}else{
				orderstatus=this.TabCur-1
			}
			if (this.finish) return
			let {
				data
			} = await this.$http.post('order.index', { status: orderstatus, page: this.page }, { tipConfig: { storeLoading: true } })
			this.finish = data.length < 20
			!this.finish && (this.page += 1)
			this.List = [...this.List, ...data]
		},
		tapTab(index) {
			if (this.TabCur === index) {
				return false
			}
			this.HideModal()
			this.clearData()
			this.TabCur = index
			this.setOrder(index)
			this.getData()
		},
		clearData() {
			this.List = []
			this.page = 1
			this.finish = false
		},
		//确认收货
		async shouhuo(item) {
			let { data } = await this.$http.post('order.shouhuo', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: true  }
			})
			this.clearData()
			this.getData()
		},
		shensu(item){
			this.pushPage('/pages/order/shensu?id='+item.id)
		},
		async stuikuan(item){
			let { data } = await this.$http.post('order.tuikuan', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: true  }
			})
			this.clearData()
			this.getData()
		},
		//删除
		async delorder(item){
			let { data } = await this.$http.post('order.shanchu', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: true  }
			})
			this.clearData()
			this.getData()
		},
		//取消
		quxiao(item){
			this.ordernum = item.id
			this.ShowModal('onlineModal')
		},
		async quxiaosure() {
			await this.$http.post('order.quxiao', { orderId: this.ordernum }, { tipConfig: { isSuccessTip: true } })
			this.HideModal()
			this.clearData()
			this.getData()
		},
		async topay(item){
			let { data } = await this.$http.post('order.buy', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: false  }
			})
			let paytype=item.payType-1
			this.payailrali(data,paytype)
			console.log(data,paytype)
		},
		async payailrali(data,paytype) {
			let provider = this.paylist[paytype].provider
			let [err, res] = await uni.requestPayment({
				provider: provider,
				orderInfo: data
			})
			
			if (res) {
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				setTimeout(() => {
					this.TabCur=2
				}, 1500);
			}
			if (err) {
				uni.showToast({
					title: '支付失败!重新支付',
					icon: 'none'
				})
				
			}
		}
	}
}
</script>

<style lang="less">
.order-del{
	border: 0.5px solid #FE4725;
	border-radius:5rpx;
	width: 160rpx;
	height: 60rpx;
	color: #FE4725;
}
.order-quxiao{
	border: 0.5px solid #CCCCCC;
	border-radius: 5rpx;
	color: #000000;
	width: 160rpx;
	height: 60rpx;	
}
.mworde{
	width: calc(100% - 170rpx);
}
</style>
